import React from 'react';
import TweenOne from 'rc-tween-one';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import VideoPlay from 'react-sublime-video';

function Content4(props) {
  const { ...tagProps } = props;
  const { isMobile } = tagProps;
  // 删除dataSource相关属性
  delete tagProps.dataSource;
  delete tagProps.isMobile;
  
  return (
    <div {...tagProps} className="home-page-wrapper content4-wrapper">
      <div className="home-page content4">
        <div key="title" className="title-wrapper">
          <h1 className="title-h1">蚂蚁金融云提供专业的服务</h1>
          <div className="title-content content4-title-content">科技想象力，金融创造力</div>
        </div>
        <OverPack playScale={0.3} className="">
          <TweenOne
            key="video"
            animation={{ 
              y: '+=30',
              opacity: 0,
              type: 'from',
              ease: 'easeOutQuad',
              delay: 300 
            }}
            className="content4-video"
          >
            {isMobile ? (
              <video
                width="100%"
                loop
                controls
                poster="/images/HZgzhugQZkqUwBVeNyfz.jpg"
              >
                <source src="/images/EejaUGsyExkXyXr.mp4" type="video/mp4" />
                <track kind="captions" />
              </video>
            ) : (
              <VideoPlay
                loop
                width="100%"
                poster="/images/HZgzhugQZkqUwBVeNyfz.jpg"
              >
                <source src="/images/EejaUGsyExkXyXr.mp4" type="video/mp4" />
              </VideoPlay>
            )}
          </TweenOne>
        </OverPack>
      </div>
    </div>
  );
}

export default Content4;
